
/* 
    导出一个配置项：用来对webpack的打包行为做设置
*/
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
    // 其他省略....
    // 配置 webpack-dev-server的选项 npm i webpack-dev-server -D
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端⼝
        open: true  // 配置是否⾃动打开浏览器
    },
    mode: 'development',//程序打包方式
    // evelopment :开发模式(代码不会压缩 混淆)
    // production:生产模式（压缩，混淆，加密… 不可读）
    entry: './src/js/main.js', //入口文件
    output: {
        path: path.join(__dirname, '/build'), // 决定出口文件在哪里
        filename: 'main.js' // 设置出口文件的名字。默认情况下，它叫main.js
    },
    module: { // 处理非js模块
        rules: [ // 规则
            {
                test: /\.css$/, // 正则测试
                use: ['style-loader', 'css-loader'] // loader 在有多个loader的情况下，use数组中的loader执行顺序是从右到左的过程
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
                type: 'asset' // 在导出⼀个 data URI 和⼀个单独的⽂件之间⾃动选择
            },
        ]
    }, // 只能正常运行，要想样式生效npm i style-loader -D
    plugins: [
        // new CleanWebpackPlugin(), // 打包前全部清理打包的文件
        new HtmlWebpackPlugin({ // 打包输出HTML
            minify: { // 压缩HTML⽂件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空⽩符与换⾏符
                minifyCSS: true // 压缩内联css
            },
            filename: 'index.html',
            template: path.resolve('./mapIndex.html') // 指定模块的位置
        })
    ]
}